<template>
  <view class="cont">
    <view v-if="list && list.length > 0">
      <view class="box" @tap="godetails(item)" v-for="item in list" :key="item.orgCode">
        <view class="box-one">
          <view class="box-title">
            <text v-if="item.gkcs">{{ item.gkcs.split("|")[0] }}</text>
            <text v-else>请添加巡检点名称</text>
          </view>
          <view class="box-icon">
            <u-icon name="arrow-right"></u-icon>
          </view>
        </view>
        <view class="box-two">
          <view class="box-two-left">
            <u-icon name="clock-fill" color="#1989fa"></u-icon>
            <text style="padding: 0 10px" v-if="item.time">{{ item.time }}</text>
            <text style="padding: 0 10px" v-else>暂无上次巡查任务</text>
            <view class="box-two-right"> </view>
          </view>
        </view>
      </view>
    </view>
    <u-empty
      v-else
      mode="list"
      text="暂无巡检任务"
      icon="http://cdn.uviewui.com/uview/empty/list.png"
    >
    </u-empty>
  </view>
</template>

<script>
import { toBeInspectedAPI } from "../../../api/api";

export default {
  data() {
    return {
      list: null,
    };
  },
  mounted() {
    this.init();
  },
  onShow() {
  	this.init()
  },
  methods: {
    init() {
      toBeInspectedAPI({
        userId: uni.getStorageSync("userId"),
      }).then((r) => {
        this.list = r.data;
      });
    },
    godetails(e) {
      uni.navigateTo({
        url: `../details/details?id=${e.id}&type=${e.type}`,
      });
    },
    goworkapproval() {
      uni.navigateTo({
        url: "../workapproval/workapproval",
      });
    },
  },
};
</script>

<style lang="scss">
.avtive {
  background: #1989fa !important;
}

.color {
  color: #1989fa !important;
}

.tabs {
  display: flex;
  justify-content: space-around;

  .tabs-one {
    width: 311rpx;
    height: 82rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .tabs-top {
      width: 112rpx;
      height: 44rpx;
      font-size: 28rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #999;
      line-height: 44rpx;
    }

    .tabs-color {
      width: 64rpx;
      height: 6rpx;
      margin-top: 15rpx;
      background: #fff;
    }
  }
}

.cont {
  height: calc(100vh - 88px);
  padding: 40rpx 30rpx;
  background-color: #f6f6f6;

  .box {
    padding: 32rpx 48rpx;
    background-color: #fff;
    border-radius: 16px 16px 16px 16px;
    margin-bottom: 20rpx;

    .box-one {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 20rpx;
      margin-bottom: 20rpx;
      border-bottom: 1px solid #eeeeee;

      .box-title {
        font-size: 32rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
      }

      .box-icon {
      }
    }

    .box-two {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx;
      border-radius: 8px 8px 8px 8px;
      background: #f6f6f6;

      .box-two-left {
        display: flex;
        align-items: center;

        img {
          width: 28rpx;
          height: 28rpx;
        }

        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #999999;
      }

      .box-two-right {
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #999999;
      }
    }
  }
}
</style>
